本章我们将通过以下几个方面对 Workbox 的基本配置进行阐述说明，并以此开启 Workbox 的学习之旅：

• 加载本地 workbox-sw.js 文件。
• 模块异步加载问题。
• 调试配置。
• 缓存名称配置。
• 启用 skipWaiting 和 clients.claim。

# 加载本地 workbox-sw.js 文件

由于 workbox-sw.js 是 Workbox 的入口文件，所以在使用相关功能之前，我们必须加载该文件，比如：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

由于网络环境因素导致 Google 的 CDN 往往无法访问，因此我们一般通过本地来加载该文件：

importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox/',
  modulePathCb: (moduleName, debug) => {
    return `/third_party/workbox/${moduleName}`
  }
});

上述代码中，除了将 importScripts 中的参数由绝对网络地址转换为相对地址外，我们还调用了 workbox.setConfig 方法进行了一些设置，之所以如此，是因为我们在使用 workbox.strategies 等模块的时候，workbox 内部会首先调用 importScripts 方法来加载相关模块代码文件，其参数的构造规则为：

• 如果设置了 modulePathCb，则调用该方法并将其返回值作为 importScripts 的参数，否则进入下一步，
• 如果设置了 modulePathPrefix，则将该属性值与模块名称进行拼接后作为 importScripts 的参数，否则将 CDN 的根地址与模块名称进行拼接后作为 importScripts 的参数。

其中 modulePathCb 的参数为：

• moduleName：所调用的模块名称。
• debug：是否使用调试版本，其值取自 workbox 配置中的 debug 属性（将在下文介绍）。

# 模块异步加载问题

上文我们说过，当使用 workbox.strategies 等模块的时候，workbox 内部会首先调用 importScripts 方法来加载相关模块代码文件，由于 Service Worker 中的 importScripts 方法只能在 install 事件中或在 Service Worker 脚本的全局作用域内调用，因此以下调用将会导致问题：

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.makeRequest({request: event.request}));
  }
});

可通过以下方式来修复该问题：

workbox.loadModule('workbox-strategies');

self.addEventListener('fetch